<!-- file proyek -->
<script> 
	
	$(function(){
		/* REMOVE DUPLICATE ID */
		var ids = [];
		$('*').each(function() {
		    if (this.id && this.id !== '') {
		        if (ids[this.id]) {
		            $(this).remove();
		        } else {
		            ids[this.id] = this
		        }
		    }
		});
		
		/* external function */
		
        function format(state) {
			tambahan = "";
			if (typeof $(state.element[0]).attr("alt") != "undefined")
				tambahan = $(state.element[0]).attr("alt");
            return state.text+tambahan ; 
        }
		
		$.fn.getCombobox = function(data, key, label, desc){
			var field = $(this);
			field.html("<option></option>");
			$.ajax({
				url : "c_public_function",
				data : data,
				type : 'POST', dataType : 'json'
			}).done(function(response){
				for(i=0;i<response.length;i++){
					var option = "<option value='"+response[i][key]+"' ";
					if (typeof response[i][desc] != "undefined")
						option += " alt='<div class=desc>"+response[i][desc]+"</div>'";
						
					option += " >"+response[i][label]+"</option>";
					field.append(option);
				}
				
				field.select2({
					placeholder: "-",
					allowClear: true,
					formatResult: format,
					formatSelection: format,
					escapeMarkup: function (m) {
						return m;
					}
				});
			});
		}
		
		$.fn.serializeObject = function()
		{
		   var o = {};
		   var a = this.serializeArray();
		   $.each(a, function() {
			   if (o[this.name]) {
				   if (!o[this.name].push) {
					   o[this.name] = [o[this.name]];
				   }
				   o[this.name].push(this.value || '');
			   } else {
				   o[this.name] = this.value || '';
			   }
		   });
		   return o;
		};
		
		/* declarisasi */
		
		task_proyek = $("#task-proyek");
		grid_proyek = $("#grid-proyek");
		btnadd_proyek = $("#btn-add-proyek");
		btncancel_proyek =  $("#btn-cancel-proyek");
		btnsave_proyek = $("#btn-save-proyek");
		form_proyek = $("#form-proyek");
		portlet_proyek = $("#portlet-proyek");
		
		field_proyek_id = $("#proyek_id");
		field_m_cabang_id = $("#m_cabang_id");
		field_proyek_kode = $("#proyek_kode");
		field_proyek_nama = $("#proyek_nama");
		field_proyek_pm = $("#proyek_pm");
		field_proyek_nk = $("#proyek_nk");
		field_proyek_nkppn = $("#proyek_nkppn");
		field_proyek_mulai = $("#proyek_mulai");
		field_proyek_p1 = $("#proyek_p1");
		field_proyek_p2 = $("#proyek_p2");
		field_proyek_kelas = $("#proyek_kelas");
		
        var kelas_sugestion = [];
        
		/* function */
		
        function loadKelas(){
            $.ajax({
				url : "c_proyek",
				data : { task : "kelas" },
				type : 'POST',
                dataType : 'json'
            }).done(function(response){
                kelas_sugestion = response;
            });   
        }
        
		/* method started */
		loadKelas();
		/* make component */
        
		field_proyek_mulai.datepicker({ dateFormat : 'dd-MM-yy'});
        field_proyek_p1.datepicker({ dateFormat : 'dd-MM-yy'});
        field_proyek_p2.datepicker({ dateFormat : 'dd-MM-yy'});
        field_proyek_kelas.select2({
            placeholder: "Select...",
            allowClear: true,
            minimumInputLength: 1,
            query: function (query) {
                var data = {
                    results: []
                };
                
                if (kelas_sugestion.indexOf(query.term) == -1){
                    data.results.push({
                        id: query.term ,
                        text: query.term 
                    });
                    
                }
                
                for(var i = 0 ; i<kelas_sugestion.length ; i++){
                    var re = new RegExp('^'+query.term, 'i');
                    match = kelas_sugestion[i].match(re);
                    
                    if (match != null){
                        data.results.push({
                            id: match.input,
                            text: match.input
                        });
                    }
                }
                
                query.callback(data);
            }
        });
        
        field_m_cabang_id.getCombobox({task : "cabang"},"cabang_id","cabang_nama");
		/* maybe you need * /
		
		field_task_assign_date.datepicker({ dateFormat : 'dd-MM-yy'});
		field_status.select2({
					placeholder: "-",
					allowClear: true,
					formatResult: format,
					formatSelection: format,
					escapeMarkup: function (m) {
						return m;
					}
				});
		m_staff_id.select2("val",dataRow.m_staff_id);
				
		/*                  */
		
		grid_proyek.unugrid({
			url: 'c_proyek',
			data: {task : 'LIST'},
			column :[
				{ label: 'Cabang'  ,index: 'cabang_nama'  },
				{ label: 'Kode'  ,index: 'proyek_kode'  },
				{ label: 'Nama Proyek'  ,index: 'proyek_nama'  },
//				{ label: 'proyek_pm'  ,index: 'proyek_pm'  },
				{ label: 'Nilai Kontrak'  ,index: 'proyek_nk', type :'currency'  },
//				{ label: 'proyek_nkppn'  ,index: 'proyek_nkppn'  },
//				{ label: 'proyek_mulai'  ,index: 'proyek_mulai'  },
//				{ label: 'proyek_p1'  ,index: 'proyek_p1'  },
//				{ label: 'proyek_p2'  ,index: 'proyek_p2'  },
//				
				{ label: ''  ,index: 'proyek_id',type: 'action' }
			],
			deleteClick : function(id,dataRow, c ){
				if (id != null){
					confr = confirm("Apa Anda yakin menghapus data ini?");
					if (confr){
						var data = $(this).data();
						$.ajax({
							type: 'POST',
							url: 'c_proyek',
							data: {proyek_id: id, task : 'DELETE'},
							success: function(response){
								if(response==1){
									grid_proyek.unugrid('refresh');
								}
							}
						});
					}
				}
			},
			editClick : function(id,dataRow, c ){
				if (id != null){
					task_proyek.val("UPDATE");
					
					field_proyek_id.val(dataRow.proyek_id);
					field_m_cabang_id.select2("val",dataRow.m_cabang_id);
					field_proyek_kode.val(dataRow.proyek_kode);
					field_proyek_nama.val(dataRow.proyek_nama);
					field_proyek_pm.val(dataRow.proyek_pm);
					field_proyek_nk.val(dataRow.proyek_nk);
					field_proyek_nkppn.val(dataRow.proyek_nkppn);
					field_proyek_mulai.val(dataRow.proyek_mulai);
					field_proyek_p1.val(dataRow.proyek_p1);
					field_proyek_p2.val(dataRow.proyek_p2);
                    
                    field_proyek_kelas.select2("data",{"id":dataRow.proyek_kelas,"text":dataRow.proyek_kelas});
                    $(".currency").keyup();
					portlet_proyek.show();
				}
			}
		});
		
		/* event */
		$(".search input").keypress(function(e){
            if (e.keyCode == 13){
                $(".search button").click();
            }
        });
        
		$(".search button").click(function(){
            inputsearch = $(".search input").val();
            grid_proyek.unugrid("setData",{ search : inputsearch});
            grid_proyek.unugrid("refresh");
        });
        
        field_proyek_nk.change(function(){
            proyek_nkppn = Math.ceil(field_proyek_nk.asNumber() * (100 / 110));
            field_proyek_nkppn.val(proyek_nkppn);
            field_proyek_nkppn.formatCurrency();
        });
        field_proyek_kode.keyup(function(){
            proyek_kode = field_proyek_kode.val();
            field_m_cabang_id.select2("val",parseInt(proyek_kode.substr(1,1)) + 4);
        });
        
		btnadd_proyek.click(function(){
			btncancel_proyek.click();
			task_proyek.val("INSERT");
			portlet_proyek.show();
		});
		
		btncancel_proyek.click(function(){
            
            field_m_cabang_id.select2("val","");
            field_proyek_kelas.select2("val","");
			portlet_proyek.hide();
		});
		
		btnsave_proyek.click(function(){
            
            $(".currency").each(function(id,el){
                $(el).toNumber();
            });
            
			data = form_proyek.serializeObject();
			$.ajax({
				url : "c_proyek",
				data : data,
				type : 'POST'
			}).done(function(response){
                loadKelas();
				grid_proyek.unugrid('refresh');
				btncancel_proyek.click();
			});
            
		});
        
        $(".currency").keyup(function(){
            $(this).formatCurrency();
        });
	});
</script>
	<div class="portlet box blue" hidden=hidden tabindex="-1" id="portlet-proyek">
	   <div class="portlet-title">
		  <div class="caption"><i class="icon-reorder"></i>Form proyek</div>
		  <div class="tools">
			 <a href="javascript:;" class="collapse"></a>
		  </div>
	   </div>

		<div class="portlet-body form">
		<!-- BEGIN FORM-->
		<form action="#" id="form-proyek" class="horizontal-form" onSubmit="javascript:return false;">

		<input type="hidden" value="INSERT" name="task" id="task-proyek">
		<input type="hidden"  id="proyek_id" name="proyek_id" />
		
		<input id="task_id" name="task_id" hidden=hidden  />

			 <div class="form-body">
				<h3 class="form-section">Info Proyek</h3>
                 
				<div class="row">
                    <div class="col-md-6"><div class="form-group"><label class="control-label">Kode Proyek:</label><input id="proyek_kode" name="proyek_kode" class="form-control" /></div></div>
                 <div class="col-md-6"><div class="form-group"><label class="control-label">Nama Proyek:</label><input id="proyek_nama" name="proyek_nama" class="form-control" /></div></div>
                    </div>
                 
				<div class="row">
                    <div class="col-md-6"><div class="form-group"><label class="control-label">Cabang:</label><select id="m_cabang_id" name="m_cabang_id" class="form-control" ></select></div></div>
                 <div class="col-md-6"><div class="form-group"><label class="control-label">Nama PM:</label><input id="proyek_pm" name="proyek_pm" class="form-control" /></div></div></div>
                 
				<div class="row">
                    <div class="col-md-6"><div class="form-group"><label class="control-label">Kelas :</label><input type="hidden" id="proyek_kelas" name="proyek_kelas" class="form-control selec2" >
                 </div></div></div>
                        
				<h3 class="form-section">Nilai Kontrak / Add</h3>
                 
				<div class="row">
                    <div class="col-md-6"><div class="form-group"><label class="control-label">NK Akhir:</label><input id="proyek_nk" name="proyek_nk" class="currency form-control" /></div></div>
                 <div class="col-md-6"><div class="form-group"><label class="control-label">NK-PPN Akhir:</label><input id="proyek_nkppn" name="proyek_nkppn" class="currency form-control" readonly /></div></div>
                 </div>
                 
				<h3 class="form-section">Waktu Pelaksanaan</h3>
                 
				<div class="row"><div class="col-md-6"><div class="form-group"><label class="control-label">Tanggal Mulai:</label><input id="proyek_mulai" name="proyek_mulai" class="form-control" /></div></div></div>
				<div class="row"><div class="col-md-6"><div class="form-group"><label class="control-label">Tanggal P1:</label><input id="proyek_p1" name="proyek_p1" class="form-control" /></div></div> 
				 <div class="col-md-6"><div class="form-group"><label class="control-label">Tanggal P2:</label><input id="proyek_p2" name="proyek_p2" class="form-control" /></div></div></div>
		
			 </div>
			 <div class="form-actions right">
				<button type="reset" id="btn-cancel-proyek" class="btn default">Cancel</button>
				<button type="submit" id="btn-save-proyek" class="btn blue"><i class="icon-ok"></i> Save</button>
			 </div>
		  </form>
		  <!-- END FORM--> 
	   </div>
	</div>
    
	 <div class="row">
		<div class="col-md-12">
		   <!-- BEGIN SAMPLE TABLE PORTLET-->
		   <div class="portlet box yellow">
			  <div class="portlet-title">
				 <div class="caption"><i class="icon-cogs"></i>proyek</div>
				 <div class="tools">
					<a href="javascript:;" class="collapse"></a>
				 </div>
			  </div>
			  <div class="portlet-body flip-scroll">
			  
			<button id="btn-add-proyek" class="btn btn-primary">Add</button>
			<p>&nbsp;</p>
			
                      <div class="input-group search">
                         <input type="text" class="form-control" placeholder="Filter">
                         <span class="input-group-btn">
                         <button type="button" class="btn yellow">Search !</button>
                         </span>
                      </div>
			<p>&nbsp;</p>
			  <div id="grid-proyek" class="table-responsive"></div>
				</div>
			 </div>
		</div>
	</div>